<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>CSS Position, Display, Overflow Interaction</title>  
<style>  
  .container {  
    width: 200px;  
    height: 200px;  
    border: 2px solid #000;  
    overflow: hidden; /* 剪裁溢出内容 */  
    position: relative; /* 为绝对定位的子元素提供定位上下文 */  
  }  
  
  .box {  
    width: 100px;  
    height: 100px;  
    background-color: red;  
    display: inline-block; /* 设置为内联块级元素 */  
    position: absolute; /* 绝对定位 */  
    top: 50px; /* 相对于容器定位 */  
    left: 50px; /* 相对于容器定位 */  
  } 

  /*
  
  .container 是一个具有 overflow: hidden; 和 position: relative; 的容器。
.box 是一个具有 position: absolute; 的子元素，它会被定位到容器的内部，但由于它的尺寸和位置，它会部分地溢出容器的边界。
由于 .container 设置了 overflow: hidden;，因此 .box 溢出容器的部分将被剪裁掉，不会显示在容器外部。
这个示例展示了 position、display 和 overflow 属性如何共同作用来影响元素的布局和显示。
  
  
  */
</style>  
</head>  
<body>  
  
<div class="container">  
  <div class="box"></div>  
</div>  
  
</body>  
</html>